<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
    
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>字典列表</title> 

<link href="${ctx }/css/base.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx }/custom/uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx }/custom/uimaker/icon.css">
<link rel="stylesheet" href="${ctx }/css/providers.css">
</head> 
<body>
    <div class="container">
	    	<table id="dg" class="easyui-datagrid" style="width:100%;height:500px"  data-options="
                url:'${ctx}/dic/find',
                rownumbers:true,
                singleSelect:false,
                autoRowHeight:false,
                pagination:true,
                fitColumns:true,
                striped:true,
                checkOnSelect:false,
                selectOnCheck:false,
                collapsible:true,
                toolbar:'#tb',
                pageSize:10,
                onBeforeEdit:function(index,row){
                	row.editing=true;
                	editAction(index);
                },
                onAfterEdit:function(index,row){
                	row.editing=false;
                	editAction(index);
                },
                onCancelEdit:function(index,row){
                	row.editing=false;
                	editAction(index);
                }
                ">
		            <thead>
		                <tr>
		                    <th field="tableName" width="110" data-options="editor:'textbox'">表名</th>
		                    <th field="tableColunm" width="226" data-options="editor:'textbox'">表的列名</th>
		                    <th field="dcode" width="112" data-options="editor:'textbox'">列的值</th>
		                    <th field="dvalue" width="170" data-options="editor:'textbox'">翻译的值</th>
		                    <th field="active" align="center" width="105" data-options="
		                    	formatter:function(v,r,i){
		                    		var str = '';
		                    		if(!r.editing){
			                    		str += '<a href=\'#\' onclick=\'editRow(this)\'>编辑</a>&nbsp;|&nbsp;';
			                    		str += '<a href=\'#\' onclick=\'delRow(this)\'>删除</a>';
		                    		}else{
			                    		str += '<a href=\'#\' onclick=\'saveRow(this)\'>保存</a>&nbsp;|&nbsp;';
			                    		str += '<a href=\'#\' onclick=\'cancelRow(this)\'>取消</a>';
		                    		}
		                    		return str;
		                    	}
		                    ">操作</th>
		                </tr>
		            </thead>
		        </table>
		      <input type="hidden" id="ctx" value="${ctx }">  
		      <div id="tb" style="padding:0 30px;">
		        	登录名: <input class="easyui-textbox" type="text" name="code" style="width:166px;height:35px;line-height:35px;"></input>
		        	用户类型: <input class="easyui-textbox" type="text" name="name" style="width:166px;height:35px;line-height:35px;"></input>
		        <a href="#" class="easyui-linkbutton" iconCls="icon-search" data-options="selected:true">查询</a>
		        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addRow()">新增</a>
		      </div>
       
    </div>
    <script type="text/javascript" src="${ctx }/custom/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx }/custom/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${ctx }/custom/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${ctx }/js/iud2.js"></script>
    <script type="text/javascript">
       (function($){
            function pagerFilter(data){
                if ($.isArray(data)){   // is array
                    data = {
                        total: data.length,
                        rows: data
                    }
                }
                var target = this;
                var dg = $(target);
                var state = dg.data('datagrid');
                var opts = dg.datagrid('options');
                if (!state.allRows){
                    state.allRows = (data.rows);
                }
                if (!opts.remoteSort && opts.sortName){
                    var names = opts.sortName.split(',');
                    var orders = opts.sortOrder.split(',');
                    state.allRows.sort(function(r1,r2){
                        var r = 0;
                        for(var i=0; i<names.length; i++){
                            var sn = names[i];
                            var so = orders[i];
                            var col = $(target).datagrid('getColumnOption', sn);
                            var sortFunc = col.sorter || function(a,b){
                                return a==b ? 0 : (a>b?1:-1);
                            };
                            r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1);
                            if (r != 0){
                                return r;
                            }
                        }
                        return r;
                    });
                }
                var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
                var end = start + parseInt(opts.pageSize);
                data.rows = state.allRows.slice(start, end);
                return data;
            }

            var loadDataMethod = $.fn.datagrid.methods.loadData;
            var deleteRowMethod = $.fn.datagrid.methods.deleteRow;
            $.extend($.fn.datagrid.methods, {
                clientPaging: function(jq){
                    return jq.each(function(){
                        var dg = $(this);
                        var state = dg.data('datagrid');
                        var opts = state.options;
                        opts.loadFilter = pagerFilter;
                        var onBeforeLoad = opts.onBeforeLoad;
                        opts.onBeforeLoad = function(param){
                            state.allRows = null;
                            return onBeforeLoad.call(this, param);
                        }
                        var pager = dg.datagrid('getPager');
                        pager.pagination({
                            onSelectPage:function(pageNum, pageSize){
                                opts.pageNumber = pageNum;
                                opts.pageSize = pageSize;
                                pager.pagination('refresh',{
                                    pageNumber:pageNum,
                                    pageSize:pageSize
                                });
                                dg.datagrid('loadData',state.allRows);
                            }
                        });
                        $(this).datagrid('loadData', state.data);
                        if (opts.url){
                            $(this).datagrid('reload');
                        }
                    });
                },
                loadData: function(jq, data){
                    jq.each(function(){
                        $(this).data('datagrid').allRows = null;
                    });
                    return loadDataMethod.call($.fn.datagrid.methods, jq, data);
                },
                deleteRow: function(jq, index){
                    return jq.each(function(){
                        var row = $(this).datagrid('getRows')[index];
                        deleteRowMethod.call($.fn.datagrid.methods, $(this), index);
                        var state = $(this).data('datagrid');
                        if (state.options.loadFilter == pagerFilter){
                            for(var i=0; i<state.allRows.length; i++){
                                if (state.allRows[i] == row){
                                    state.allRows.splice(i,1);
                                    break;
                                }
                            }
                            $(this).datagrid('loadData', state.allRows);
                        }
                    });
                },
                getAllRows: function(jq){
                    return jq.data('datagrid').allRows;
                }
            })
        })(jQuery);
       
             
    </script>
</body> 
</html>
    